<template>
  <div class="user">
    <div class="user-top">
      <button class="avatar-circle">
        <img src="../../../assets/images/user/008.png" class="avatar-circle"/>
      </button>
      <p class="info-name">{{userName}}</p>
    </div>
    <div class="mine-wrapper">
      <div class="mine-item" v-for="(item,index) in userList">
        <div class="mine-list">
          <img src="../../../assets/images/user/002.png" class="icon-left"/>
          <p class="text">{{item.text}}</p>
          <img src="../../../assets/images/user/007.png" class="icon-right"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "user",
    data() {
      return {
        userName: '小玲',
        userList: [
          {
            'imgUrl': '../../../assets/images/user/008.png',
            text: '我的赛事',
            id: 0
          },
          {
            'imgUrl': '../../../assets/images/user/002.png',
            text: '我的培训',
            id: 1
          },
          {
            'imgUrl': '../../../assets/images/user/003.png',
            text: '我的收藏',
            id: 2
          },
          {
            "imgUrl": '../../../assets/images/user/004.png',
            text: '我的社区',
            id: 3
          },
          {
            "imgUrl": '../../../assets/images/user/005.png',
            text: '我的客服',
            id: 4
          },
          {
            "imgUrl": '../../../assets/images/user/006.png',
            text: '意见反馈',
            id: 5
          }
        ]
      };
    },
  }
</script>

<style scoped lang="less">
  .user {
    width: 100%;
    .user-top {
      padding: 24px;
      background: url("../../../assets/images/user/001.jpg") repeat;
      background-size: 100%, 100%;
      .avatar-circle {
        margin: auto;
        width: 70px;
        height: 70px;
        border: 1px solid dodgerblue;
        box-sizing: border-box;
        border-radius: 50%;
        padding: 0;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .info-name {
        font-size: 14px;
        color: #fff;
        margin-top: 10px;
      }

    }
    .mine-wrapper {
      width: 100%;
      padding: 0 30px;
      box-sizing: border-box;
      .mine-list {
        width: 100%;
        height: 45px;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        align-items: center;
        position: relative;
        .icon-left {
          width: 14px;
          height: 12px;
          flex: 0 0 9px;
        }
        .text {
          text-align: left;
          flex: 1;
          font-size: 14px;
          margin-left: 9px;
        }
        .icon-right {
          width: 7px;
          height: 12px;
          flex: 0 0 7px;
        }
      }
    }
  }


</style>
